<template>
  <body>

    <div class="top">
      <div style="height: 8px"></div>
      <el-button
        style="margin-left: 65%;"
        type="primary"
        icon="el-icon-s-home"
        size="medium"
        plain
        @click="toHome"
      >
        返回主页
      </el-button>
      <div style="height: 8px"></div>
      <hr />
    </div>

    <div style="height: 100px"></div>
    
    <div class="headline">
        <span>{{ headline }}</span>
    </div>

    <div class="problem">
      <div style="height: 7px"></div>
      <div>提交时间：{{ answers.date }}</div>
      <div style="height: 7px"></div>
      <div v-show="type==='EXAM'">总分：{{ answers.grade }}</div>
      <div style="height: 7px"></div>
      <div v-show="type==='EXAM'">答对题数：{{ answers.num }}</div>
      <div style="height: 7px"></div>
      <hr style="background-color: #409EFF; height: 2px; border: none;" />
      <div style="height: 20px"></div>
    </div>

    <div
      v-for="(q,i) in questions"
      :key="i"
      class="problem"
    >
      <p>{{ i+1 }}. </p>
      <p>{{ q.title }}</p>
      <p style="color: red" v-show="!q.noneable">*</p>
      <p class="problemType">【{{ q.type }}】</p>
      <div style="color: rgb(99, 99, 99)">{{ answers.answer[i].a }}</div>
      <div style="height: 20px"></div>


      <div v-show="q.rightAnswer!=='none'">

        <div v-show="q.rightAnswer!==answers.answer[i].a">
          <div style="color: red;" class="result" >
            <i class="el-icon-circle-close"> 回答错误</i>
            <p v-show="grade!==0" style="float:right">+0分</p>
          </div>
          <div style="height: 7px"></div>
          <div style="color: #67C23A" class="result">正确答案：{{ q.rightAnswer }}</div>
        </div>

        <div v-show="q.rightAnswer===answers.answer[i].a">
          <div style="color: #67C23A" class="result">
            <i class="el-icon-circle-check"> 回答正确</i>
            <p v-show="grade!==0" style="float:right">+{{ q.grade }}分</p>
          </div>
        </div>

        <div style="height: 20px"></div>

      </div>

    </div>

  </body>
</template>

<script>

export default {

  name: 'ExamResult',
  component: {},

  data() {
    return {

      is_loading: true,

      id: "",

      uid: "",

      headline: "",

      questions: [],

      answers: {
          date: '',
          grade: 0,
          num: 0,
          answer: []
      }

    

    }
  },

  mounted() {
    this.is_loading = true;
    this.id = this.$route.query.qnid;
    this.uid = this.$route.query.uid;
    var that = this;
    this.axios.get("/result/analyzeUser",{qnid: that.id, uid: that.uid}).then(
      function(response) {
        that.headline = response.data.data.headline;
        response.data.data.questions.forEach((q) => {
          that.questions.push(q);
        })
        that.questions.forEach(question => {
          if (question.type === "RADIO") question.type = "单选题";
          else if(question.type === "CHECKBOX") question.type = "多选题";
          else if(question.type === "INPUT") question.type = "填空题";
          else if(question.type === "RATING") question.type = "评分题";
        });
        that.answers = response.data.data.answers;
      },
      function () {  }
    )
    .finally(() => this.is_loading = false)
  },

  methods: {
    toHome: function() {
      this.$router.push('/');
    }
  }
}
</script>

<style>

  p {
    display: inline-block;
    margin: 2px;
  }

  .top {
    width: 100%;
    height: 54px;
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 999;
  }

  .problem {
    width: 60%;
    margin: 0 auto;
  }

  .problemType {
    font-weight: 100;
    color: rgb(163, 162, 162);
  }

  .headline {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    font: normal bold 35px serif;
  }

  .result {
    background-color: rgba(241, 241, 241, 0.692);
    border-radius: 4px;
    line-height: 2;
  }

</style>